<template>
  <div>
    <!-- 
      第一个p要放置到 name=top 的这个坑
      第二个p要放置到 name=bottom 的这个坑

      1. 使用 template 标签包裹
      2. 在 template 标签上 使用 v-slot:坑的名字

     -->
    <HelloWorld>
      <button>别点我</button>

      <template v-slot:top>
        <p>我的天 {{ msg }}</p>
      </template>

      <template v-slot:bottom>
        <p>我的地</p>
      </template>

      <button>点我</button>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",

  components: {
    HelloWorld,
  },

  data() {
    return {
      msg: "App",
    };
  },
};
</script>

<style></style>
